
<template>
  <div>
    <div class="center" v-if="formDesign">
      <el-form
        :label-position="labelPosition"
        :label-width="`${formDesign.formItemLabelWidth}px`"
        :size="`${formDesign.formSize || 'default'}`"
      >
        <ul class="centerFormCmpS" >
          <draggable
            class="dargCmpS"
            :group="{ name: 'form' }"
            :animation="300"
            chosenClass="chosenClass"
            dragClass="dragClass"
            handle=".move-btn"
            ghostClass="ghostClass"
            :list="formComponents"
            item-key="formItemId"
            @add="handelFormCmpDragAdd"
            @update="handelFormCmpDragUpdate"
          >
            <template #item="{ element }">
              <div :class="element.formItemId">
                <!-- 分页组件 -->
                <div v-if="element.type == 'pagenation'" class="transparent-block"></div>
                <li v-show="element.type == 'pagenation' && !formDesign.onePageOneQs" 
                  class="dragComponent pagenation-li"
                  @click="handelFormComponentClick(element)"
                  :class="element.formItemId === formDesign.formCmpId ? 'active' : ''"
                >
                  <div class="item-top-box">
                    <div class="item-top" v-show="element.formItemId === formDesign.formCmpId">
                      <div class="question-type">
                        分页
                      </div>
                      <span class="move-btn">
                        <i class="iconfont">&#xe689;</i>
                      </span>
                      <div class="question-btns">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="删除分页"
                          placement="top-start"
                        >
                          <i class="iconfont" @click="handleFormCmpDelet(element.formItemId)">&#xe74b;</i>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                  <form-cmp-ui :formComponent="element"></form-cmp-ui>
                </li>
                <!-- 其他组件 -->
                <li v-if="element.type != 'pagenation'"
                  @click="handelFormComponentClick(element)"
                  :class="{
                    'dragComponent': true,
                    'active': element.formItemId === formDesign.formCmpId,
                    'show-border-radius': formDesign.onePageOneQs,
                  }"
                >
                  <div class="item-top-box">
                    <div class="item-top" v-if="element.formItemId === formDesign.formCmpId">
                      <div class="question-type" v-if="curQuestionType && element.type != 'secondTitle'">
                        <el-tree-select 
                          v-model="curQuestionType" 
                          size="small"
                          :data="questionTypeOptions" 
                          :props="defaultProps" 
                          @node-click="(data, node) => { return handleQuestionTypeClick(data, node, element) }" 
                          :render-after-expand="false" 
                        />
                      </div>
                      <span class="move-btn">
                        <i class="iconfont">&#xe689;</i>
                      </span>
                      <div class="question-btns">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="复制当前题目"
                          placement="top-start"
                        >
                          <i class="iconfont" @click="handleFoemCmpCopy(element)">&#xe8b0;</i>
                        </el-tooltip>
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="删除当前题目"
                          placement="top-start"
                        >
                          <i class="iconfont" @click="handleFormCmpDelet(element.formItemId)">&#xe74b;</i>
                        </el-tooltip>
                        <el-dropdown>
                          <i class="iconfont more-icon">&#xe6dc;</i>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item>
                                <span @click="topInsert(element)"><i class="iconfont">&#xe8d8;</i>在上方插入一题</span>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <span @click="bottomInsert(element)"><i class="iconfont">&#xe8c9;</i>在下方插入一题</span>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <span @click="addToMyBank(element)"><i class="iconfont">&#xe670;</i>将此题加入我的题库</span>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </div>
                  </div>
                  <form-cmp-ui :formComponent="element"></form-cmp-ui>
                </li>
              </div>
            </template>
          </draggable>
        </ul>
      </el-form>
    </div>
    <!-- 添加题目 选择题库 -->
    <el-dialog
      v-model="showChooseMyBank"
      append-to-body
      :title="`请选择分组`"
      width="30%"
      class="choose-my-bank-dialog"
    >
      <el-form>
        <el-form-item label="题库分组">
          <el-tree-select
            v-model="curGroupId"
            :data="tabArr"
            clearable
            node-key="id"
            :render-after-expand="false"
            :props="treeProps"
            placeholder="请选择题库分组"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showChooseMyBank = false">取消</el-button>
          <el-button type="primary" :disabled="myBankQsLoading" @click="myBankQsSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import formCmpUi from "@/views/form/manage/design/formCmpUi.vue";
import { ref, computed, defineExpose, watch, defineEmits } from "vue";
import draggable from "vuedraggable";
import { useStore } from 'vuex'
import { modelQuestion } from "@/views/form/manage/design/config/formCmpConfig.js";
import { ElMessageBox, ElMessage,ElLoading } from 'element-plus'
import { addMyBankQs, selectListByIds, selectAllQuestion } from "@/api/formDesign";
import { createTreeData } from '@ruifox-cms/utils'

const emits = defineEmits(['changeScroll'])
const store = useStore()
const formDesign = computed(()=>{return store.getters.formDesignInfo})
const formComponents = computed(() => {return formDesign.value.formItemList || []});
const currentFormItemId = computed(() => {return formDesign.value.formCmpId});
const formComponent = ref({}); // 选中的formCmp
watch( // 监听选中组件并赋值
  () => currentFormItemId.value,
  () => {
    curChooseCmpInit()
  }
);
const curChooseCmpInit = () => {
  formComponents.value.forEach((item) => {
    if (item.formItemId === currentFormItemId.value) formComponent.value = item
  });
}
curChooseCmpInit()
const componentList = computed(()=>{return store.state.formDesignInfo.componentList})
const curComponentList = computed(()=>{return store.state.formDesignInfo.curComponentList})
const questionTypeOptions = computed(()=>{
  return curComponentList.value.filter(item=>item.title!='分页描述').map(item=>{
    return {
      compName: item.title,
      children: item.list,
      type: item.title
    }
  })
})
let labelPosition=computed(() => {return formDesign.value.labelPosition})
// 拖动新增组件
const handelFormCmpDragAdd = async (evt) => {
  const newIndex = evt.newIndex; // 获取darggable组件列表新增项的下标
  const noIDFormCmp = JSON.parse(JSON.stringify(formComponents.value[newIndex]));
  const formCmp = JSON.parse(JSON.stringify(formComponents.value[newIndex]));
  //拖拽添加时，为了判断是否重复添加，先将该元素截取并临时存储，如果确认则保留，否则删除该元素
  const tempFormCmp = formComponents.value.splice(newIndex,1)
  const continueAdd = await repeatAdd(formCmp.label)
  if(!continueAdd) return
  formComponents.value.splice(newIndex,0,tempFormCmp)
  if(!canUsePagenation(formCmp)) return
  // 生成唯一id
  if (!formCmp.formItemId) formCmp.formItemId = formCmp.type + "_" + Date.now() + "_" + Math.ceil(Math.random() * 99999);
  formDesign.value.formCmpId = formCmp.formItemId; // 将新增项的formItemId赋值给formDesign.formCmpId 用于判定是否选中
  if(formCmp.type === 'pagenation'){ //分页插入单独处理
    //表单第一项是否是分页器
    if(formComponents.value[0]?.type === 'pagenation'){ 
      formComponents.value[newIndex] = formCmp;
    }else{
      formComponents.value[newIndex] = formCmp;
      handelFormCmpClickAdd(noIDFormCmp, 0)
    }
  }else{
    formComponents.value[newIndex] = formCmp;
  }
  if(formDesign.value.onePageOneQs) handleOnePageOneQs(true) //一页一题处理

};
// 拖拽重排组件
const handelFormCmpDragUpdate = () => {
  if(formDesign.value.onePageOneQs) handleOnePageOneQs(true) //一页一题处理
}
// 点击新增组件
const handelFormCmpClickAdd = async (cmp, insertIndex,triggerScroll = true,skipDuplicateCheck = false) => {
  // 如果需要跳过重复检查，直接返回true
  let continueAdd = true;
  // 只有不跳过检查时才调用repeatAdd
  if (!skipDuplicateCheck) {
    continueAdd = await repeatAdd(cmp.label);
  }
  if (!continueAdd) return;

  if(!canUsePagenation(cmp)) return
  const newCmp = JSON.parse(JSON.stringify(cmp));
  // 生成唯一id
  if (!newCmp.formItemId) newCmp.formItemId = newCmp.type + "_" + Date.now() + "_" + Math.ceil(Math.random() * 99999);
  formDesign.value.formCmpId = newCmp.formItemId;
  
  if(insertIndex != undefined){ //向上向下插入组件
    formComponents.value.splice(insertIndex, 0, newCmp) ;
  }else{ //末尾新增组件
    if(newCmp.type === 'pagenation'){ //分页插入单独处理
      //表单第一项是否是分页器
      if(formComponents.value[0]?.type === 'pagenation'){ 
        formComponents.value[formComponents.value.length] = newCmp;
      }else{
        formComponents.value[formComponents.value.length] = newCmp;
        handelFormCmpClickAdd(JSON.parse(JSON.stringify(cmp)), 0)
      }
    }else{
      formComponents.value[formComponents.value.length] = newCmp;
    }
    if(formDesign.value.onePageOneQs) handleOnePageOneQs(true) //一页一题处理
  }
  if (triggerScroll) {
    setTimeout(() => {
      emits('changeScroll')
    }, 0); 
  }
}
//批量添加题目
const handleBatchInsertQuestions = async (ids) => {
  try {
    // 显示加载状态
    let loading = ElLoading.service({
      lock: true,
      text: '正在添加题目...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    // 根据id获取题目
    const res = await selectListByIds({ ids: ids.join(',') });
    if (!res.data || res.data.length === 0) {
      loading.close();
      ElMessage.warning('没有找到对应的题目');
      return;
    }
    // 收集所有重复题目
    const duplicateItems = [];
    const uniqueItems = [];
    // 先检查所有题目，区分重复和不重复的
    for (const item of res.data) {
      const addedIndex = formComponents.value.findIndex(
        cmp => item.cmp.label && cmp.label === item.cmp.label
      );
      if (addedIndex !== -1) {
        duplicateItems.push(item);
      } else {
        uniqueItems.push(item);
      }
    }
    // 关闭加载状态
    loading.close();
    // 处理重复题目
    let continueWithDuplicates = true;
    if (duplicateItems.length > 0) {
      const { action } = await ElMessageBox.confirm(
        `<div>
          <p style="font-size: 16px;margin: 15px 0;">以下 ${duplicateItems.length} 道题目已存在，是否重复添加？</p>
          <ul style="margin: 10px 0; padding-left: 20px;">
            ${duplicateItems.map(item => `<li>${item.cmp.label}</li>`).join('')}
          </ul>
        </div>`,
        '添加题目',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      );
      if (action === 'cancel') {
        continueWithDuplicates = false;
      }
    }
    // 重新显示加载状态
    if (uniqueItems.length > 0 || (continueWithDuplicates && duplicateItems.length > 0)) {
      loading = ElLoading.service({
        lock: true,
        text: '正在添加题目...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    }
    // 记录成功和失败的数量
    let successCount = 0;
    let failCount = 0;
    
    // 先添加不重复的题目
    for (const item of uniqueItems) {
      try {
        await handelFormCmpClickAdd(item.cmp, undefined, false);
        successCount++;
      } catch (error) {
        failCount++;
        console.error('添加题目失败:', item.cmp.label, error);
      }
    }
    
    // 再添加用户确认要重复添加的题目
    if (continueWithDuplicates) {
      for (const item of duplicateItems) {
        try {
          await handelFormCmpClickAdd(item.cmp, undefined, false,true);
          successCount++;
        } catch (error) {
          failCount++;
          console.error('添加题目失败:', item.cmp.label, error);
        }
      }
    }
    // 关闭加载状态
    if (loading) {
      loading.close();
    }
    // 显示添加结果
    if (successCount > 0) {
      ElMessage.success(`成功添加 ${successCount} 道题目`);
    }
    if (failCount > 0) {
      ElMessage.warning(`有 ${failCount} 道题目添加失败`);
    }
    // 只在全部添加完成后触发一次滚动事件
    emits('changeScroll');
  } catch (error) {
    console.error('获取题目列表失败:', error);
    ElMessage.error('获取题目列表失败，请稍后重试');
  }
};

//重复添加提示
const repeatAdd = (label) => {
  return new Promise(resolve => {
    const addedIndex = formComponents.value.findIndex(item => label && item.label === label)
    if(addedIndex != -1){
      ElMessageBox.confirm(
        '<div><p style="font-size: 16px;margin: 15px 0;">该题目已添加，是否重复添加？</p></div>',
        '添加题目',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
        }
      )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          resolve(true)
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消添加',
          })
          resolve(false)
        })
    }else{
      resolve(true)
    }
  })
}
// 检测是否禁用分页组件
const canUsePagenation = (cmp) => {
  if(cmp.type == 'pagenation' && formDesign.value.onePageOneQs){
    ElMessage({
      showClose: true,
      message: '表单已开启「一页一题」，不支持手动添加分页',
      type: 'warning'
    })
    return false
  }
  return true
}
// 中间区域组件点击
const handelFormComponentClick = (e) => {
  formDesign.value.formCmpId = e.formItemId; // 将点击项的formItemId赋值给formDesign.formCmpId 用于判定是否选中in
};
// 组件删除
const handleFormCmpDelet = (id) => {
  ElMessageBox.confirm(
      '<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除所选题目？</p><span style="font-size: 14px;color: #FF5240;">清除后内容将无法恢复</span></div>',
      '删除确认',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    // 分页删除判断
    if(beforeDeletePageCmp(formComponent.value)) return
    formComponents.value.forEach((item, index) => {
      if (item.formItemId === id) {
        formComponents.value.splice(index, 1);
      }
    });
    if(formDesign.value.onePageOneQs) handleOnePageOneQs(true) //一页一题处理
  })
};
// 分页删除判断
const beforeDeletePageCmp = (cmp) => {
  // 如果分页器数量大于2，并且删除的是第一个翻页器，则不允许删除
  if(cmp.type == 'pagenation' && cmp.labelIndex == 1 && formComponents.value.filter(item=>item.type == 'pagenation')?.length > 2){
    ElMessage({
      showClose: true,
      message: '当前页数大于2页，第1页暂不支持删除',
      type: 'warning'
    })
    return true
  }else if(cmp.type == 'pagenation' && formComponents.value.filter(item=>item.type == 'pagenation')?.length == 2){
    // 如果当前只有两页，删除任意分页器，则分页全部删除
    formDesign.value.formItemList = formComponents.value.filter(item => item.type != 'pagenation')
    return true
  }else{
    return false
  }
}
// 组件复制
const handleFoemCmpCopy = (cmp) => {
  const newCmp = JSON.parse(JSON.stringify(cmp));
  newCmp.formItemId = newCmp.type + "_" + Date.now() + "_" + Math.ceil(Math.random() * 99999);
  formDesign.value.formCmpId = newCmp.formItemId;
  formComponents.value.splice(cmp.cmpIndex, 0, newCmp) ;
  if(formDesign.value.onePageOneQs) handleOnePageOneQs(true) //一页一题处理
};
const defaultProps = {
  children: 'children',
  label: 'compName',
  value: 'type',
}
const curQuestionType = ref(null)
// 当前题型(切换题型用)
watch( 
  () => formComponent.value,
  () => {
    curQuestionTypeInit()
  },{
    deep: true
  }
);
const curQuestionTypeInit = () => {
  if(formComponent.value?.type) curQuestionType.value = JSON.parse(JSON.stringify(formComponent.value.type))
}
curQuestionTypeInit()
const replace = (data, ele) => {
  let newCmp = JSON.parse(JSON.stringify(data))
  let element = JSON.parse(JSON.stringify(ele))
  newCmp.label = element.label
  newCmp.description = element.description
  newCmp.formItemId = element.formItemId
  newCmp.cmpIndex = element.cmpIndex
  newCmp.labelIndex = element.labelIndex
  formComponent.value = newCmp
  formComponents.value.splice(element.cmpIndex - 1, 1, newCmp)
}
// 切换题型
const handleQuestionTypeClick = (data, node, element) => {
  if(node.level === 1) return
  let isRight = isRightQuestion(element)
  if(!isRight){
    // 判断只要操作了当前题目，切换题型需要加提示
    ElMessageBox.confirm(
      '<div><span style="font-size: 14px;color: #FF5240;">变更后将仅保留标题内容（含题目描述、是否必填），是否切换？</span></div>',
      '题型切换提示',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
    ).then(() => {
      replace(data, element)
    }).catch()
  }else{
    if(isRight === 'cantChange'){
      ElMessage({
        showClose: true,
        message: '当前题目不支持切换题型',
        type: 'warning'
      })
    }else{
      replace(data, element)
    }
  }
}
// 判断当前是否是有效题目
const isRightQuestion = (element) => {
  // 判断只要操作了当前题目，切换题型需要加提示
  let originElement = componentList.value.find(item=>item.type === element.type)
  // 考生信息组件，标题是定死的，不允许切换题型
  if(element.isUserInfo){
    return 'cantChange'
  }
  if(element.formItemId) originElement.formItemId = element.formItemId
  if(element.cmpIndex) originElement.cmpIndex = element.cmpIndex
  if(element.labelIndex) originElement.labelIndex = element.labelIndex
  return JSON.stringify(originElement) === JSON.stringify(element)
}
// 上方插入一题
const topInsert = (val) => {
  handelFormCmpClickAdd(modelQuestion, val.cmpIndex - 1)
}
// 下方插入一题
const bottomInsert = (val) => {
  handelFormCmpClickAdd(modelQuestion, val.cmpIndex)
}
// const myBank = computed(()=>{return store.state.formDesignInfo.myBank})
// const handleGetMybank = async () => {
//   store.dispatch('formDesignInfo/handleGetMybank')
// }
// handleGetMybank()
const showChooseMyBank = ref(false)
const myBankQsLoading = ref(false)
const curGroupId = ref(null)
// 加入我的题库
const addToMyBank = () => {
  showChooseMyBank.value = true
}
const tabArr = ref([
  {id:-1,bankType:2,title:"非考试类",children:[]},
  {id:0,bankType:1,title:"考试类",children:[]}
])
const treeProps = {
  children: 'children',
  label: function (data) {
    return data.title
  }
}
const handleGetMybank = () => {
  return new Promise((resolve) => {
    selectAllQuestion().then(res=>{
        tabArr.value.forEach(group => {
            group.children = [];
        });
        const treeData = createTreeData(res.data)
        // 将数据按 bankType 分类到对应组
        treeData.forEach(item => {
            const targetGroup = tabArr.value.find(
            group => group.bankType === item.bankType
            );
            if (targetGroup) {
            targetGroup.children.push(item);
            }
        });
        resolve()
    })
  })
}
handleGetMybank()

// 加入我的题库确认
const myBankQsSubmit = async () => {
  if(!curGroupId.value){
    ElMessage({
      showClose: true,
      message: '请选择分组！',
      type: 'warning'
    })
    return
  }
  myBankQsLoading.value = true
  // eslint-disable-next-line no-unused-vars
  let { formItemId, labelIndex, cmpIndex , ...cmp} = formComponent.value
  let param = { id: curGroupId.value, cmp }
  let res = await addMyBankQs(param)
  if(res.code == 20000){
    ElMessage({
      showClose: true,
      message: '新增成功！',
      type: 'success'
    })
  }
  showChooseMyBank.value = false
  myBankQsLoading.value = false
}
const pagenation = {
  type: "pagenation",
  label: "",
  compName: '分页', //组件名
  width:'100%', //宽度
  qsList: [], //当前页的题目
  default: null,
}
// 开启/关闭一页一题
const handleOnePageOneQs = (val) => {
  let newList = []
  if(val){ 
    let cpmArr = formComponents.value.filter(item=>item.type != 'pagenation' && item.type != 'secondTitle')
    cpmArr.forEach(cmp =>{
      newList.push(handelAddPagenaiton(pagenation))
      newList.push(cmp)
    })
    formDesign.value.formItemList = newList
  }
  else{
    formDesign.value.formItemList = formDesign.value.formItemList.filter(item => item.type != 'pagenation')
  }
}
// 生成分页器组件
const handelAddPagenaiton = (cmp) => {
  const newCmp = JSON.parse(JSON.stringify(cmp));
  // 生成唯一id
  if (!newCmp.formItemId) newCmp.formItemId = newCmp.type + "_" + Date.now() + "_" + Math.ceil(Math.random() * 99999);
  return newCmp
}
watch( // 监听表单组件变化 给表单添加索引
  () => formComponents.value,
  () => {
    // 非分页组件添加索引
    formComponents.value.filter(item=>(item.type!='pagenation' && item.type!='secondTitle')).forEach((item, index)=>{
      item.labelIndex = index + 1
    })
    // 组件索引
    formComponents.value.filter(item => item.type != 'secondTitle').forEach((item, index)=>{
      item.cmpIndex = index + 1
    })
    // 分页组件添加索引
    let pagenations = formComponents.value.filter(item=>item.type=='pagenation')
    pagenations.forEach((item, index)=>{
      item.labelIndex = index + 1
    })
    // 计算总页数
    formDesign.value.allPageNum = pagenations.length
    let pagenationIndexArr = []
    formComponents.value.forEach((item, index) => {
      if(item.type === 'pagenation'){
        if(!pagenationIndexArr.includes(index)) pagenationIndexArr.push(index)
      }
    })
    // 是否有分页器
    formDesign.value.hasPageCmp = pagenationIndexArr.length > 0 ? true : false
    //计算每个分页器包含的题目开始结束索引
    pagenationIndexArr.forEach((item, itemIndex) => {
      let startCmp, endCmp
      let curPageCmp = formComponents.value[item] //当前分页器
      startCmp = item
      if(pagenationIndexArr[itemIndex + 1]){
        endCmp = pagenationIndexArr[itemIndex + 1] - 1
      }else{
        endCmp = formComponents.value.length - 1
      }
      if(endCmp - startCmp === 0){ //标记当前分页器是否没有题目
        curPageCmp.noQs = true
      }else{
        curPageCmp.noQs = false
      }
      curPageCmp.startCmp =  startCmp
      curPageCmp.endCmp =  endCmp
    })
    store.commit('formDesignInfo/SET_FORMINFO', formDesign.value)
  },{
    deep: true
  }
);
//获取指定题目的元素属性
const getClientRect = (className) => {
  let element = document.getElementsByClassName(className);
  emits('changeScroll',element[0].offsetTop - element[0].offsetHeight)
}

defineExpose({
  handelFormCmpClickAdd,
  handleOnePageOneQs, //一页一题处理
  getClientRect,
  handleBatchInsertQuestions
})
</script>

<style lang="scss" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  // border: 2px dashed $mainColor !important;
}
/* 选中的样式 */
.chosenClass {
  border: 2px dashed $mainColor !important;
  border-left: none !important;
}
/* 拖动的样式 */
.dragClass {
  border: 3px dashed $mainColor !important;
  border-left: none !important;
}
.center {
  min-height: 80vh;
  overflow: hidden;
  padding-top: 10px;
  .dargCmpS {
    min-height: 80vh;
    .dragComponent {
      box-sizing: border-box;
      background-color: #fff;
      padding-bottom: 10px;
      animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1; // 移入
      .item-top-box{
        height: 40px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        .item-top{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .question-type{
            font-size: 14px;
            width: 100px;
            .el-select{
              width: 100px;
              ::v-deep(.is-focus .el-input__wrapper){
                box-shadow: none !important;
              }
              ::v-deep(.el-input__wrapper.is-focus){
                box-shadow: none !important;
              }
              ::v-deep(.el-input__wrapper){
                box-shadow: none;
              }
              ::v-deep(input){
                font-size: 14px;
              }
            }
          }
          .question-btns{
            width: 116px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            i {
              color: #000;
              padding: 5px;
              &:hover {
                cursor: pointer;
                color: $hoverColor;
                background: #F0F1F1;
                border-radius: 3px;
              }
            }
            .iconfont {
              right: 20px;
              font-size: 16px;
            }
            .more-icon{
              font-size: 20px;
            }
            .iconfont {
              &:last-child{
                right: 0;
              }
            }
          }
          .move-btn{
            user-select: none;
            cursor: move;
            display: flex;
            height: 20px;
            width: 20px;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            i{
              font-size: 26px;
              color: $black_tips;
            }
          }
        }

      }
    }
    .show-border-radius{
      overflow: hidden;
      border-radius: 4px;
    }
    .transparent-block{
      width: 100%;
      height: 20px;
      z-index: 1;
      background-color: var(--el-color-primary-light-9);
    }
    .active {
      position: relative;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      &::before{
        position: absolute;
        content:'';
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background: $mainColor;
      }
    }
    ::v-deep .el-form-item__label {
      white-space: nowrap;
      padding-right: 0;
    }
  }
}

// 动画
.slide-right {
  animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
}
@keyframes slide-right {
  0% {
    transform: translateX(-100px);
    opacity: 0.1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-out-left {
  animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) 1; // 移出
}
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}
.choose-my-bank-dialog{
  .el-radio-group{
    flex-direction: column;
    align-items: flex-start;
    margin-left: 50px;
    .el-radio{
      margin-right: 10px;
    }
  }
}
</style>
